<template>
  <div>
    <!-- Mine  内容 -->
    <!-- 顶部标题栏 -->
    <div class="f1">
      <div class="container">
        <div class="top">
          <div class="top1">
            <img src="/img/kf.png" alt="" />
            <img src="/img/zx.png" alt="" />
          </div>
        </div>
        <div class="user">
          <div  @click="$router.push('/register')" class="user_img"><img src="/img/tx.png" alt="" /></div>
          <div class="users">
            <div class="u1">158****5737 <img src="/img/vip.png" alt="" /></div>
            <div class="u2">
              <van-progress class="u2_jdt" :percentage="2" stroke-width="5" />
              <p>50升级</p>
            </div>
            <p class="u3">本月已充电0度,充50度可升级为银卡会员</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 各功能同页面 -->
    <div class="big">
      <div class="fu">
        <!-- 功能页面1 -->

        <div class="z1">
          <div class="z2">
            <van-grid :column-num="3" :border="false">
              <van-grid-item text="未开通" />
              <van-grid-item text="6" />
              <van-grid-item text="0" />
              <van-grid-item text="可用余额" />
              <van-grid-item text="卡卷" />
              <van-grid-item text="积分" />
            </van-grid>
          </div>
        </div>

        <!-- 我的爱车 -->
        <div class="ac">
          <div class="ac1">
            <span class="ac1-1">我的爱车</span>
            <span class="ac1-2">添加爱车</span>
          </div>

          <div class="ac2">
            <div class="ac3">
              <img class="xc" src="/img/xc.webp" alt="" /><br />
              <span class="tyc">体验车</span>
            </div>
            <div class="ac3-1">
              <div class="ac3-2">
                <span class="ac2-1">北京新能源Eve160</span>
                <span class="ac2-2">演示中</span>
              </div>
              <div class="ac4">
                <van-grid :column-num="3" :border="false">
                  <van-grid-item text="98%" />
                  <van-grid-item text="160km" />
                  <van-grid-item text="88分" />
                  <van-grid-item text="剩余电量" />
                  <van-grid-item text="当前续航" />
                  <van-grid-item text="最近体验" />
                </van-grid>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的充电 -->
        <div class="cd">
          <div class="cd1">
            <span class="cd-1">我的充电</span>
            <span class="cd-2">月账单</span>
          </div>
          <div class="cd2">
            <van-grid :column-num="4" :border="false">
              <van-grid-item icon="/img/dd.png" text="订单" />
              <van-grid-item   @click="$router.push('/shoucang')" icon="/img/sc.png" text="收藏" />
              <van-grid-item icon="/img/kp.png" text="开票" />
              <van-grid-item icon="/img/xcgh.png" text="行程规划" @click='$router.push("/amap")'/>
              <van-grid-item icon="/img/jcjc.png" text="即插即用" />
              <van-grid-item icon="/img/V2G.png" text="V2G" />
            </van-grid>
          </div>
        </div>

        <!-- 我的设置 -->
        <div class="sz">
          <div class="sz1">
            <span class="sz-1">我的设置</span>
            <span class="sz-2">更多设置</span>
          </div>
          <div class="sz2">
            <van-grid :column-num="4" :border="false">
              <van-grid-item
                @click="$router.push('/preference') "
                icon="/img/phsz.png"
                text="偏好设置"
                
              />
              <van-grid-item
                @click="$router.push('/charge') "
                icon="/img/cdsz.png"
                text="充电设置"
              />
              <van-grid-item
                @click="$router.push('/zhifu') "
                icon="/img/zfsz.png"
                text="支付设置"
              />
              <van-grid-item
                @click="$router.push('/tidings')"
                icon="/img/xxsz.png"
                text="消息设置"
              />
            </van-grid>
          </div>
        </div>

        <!-- 我的庄 -->
        <div class="wdz">
          <div class="wdz1">
            <span class="wdz-1">我的桩</span>
            <span class="wdz-2">申请建桩</span>
          </div>
          <div class="wdz2">
            <van-grid :column-num="4" :border="false">
              <van-grid-item icon="/img/wdyy.png" text="我的预约" />
              <van-grid-item icon="/img/wbyy.png" text="我被预约" />
              <van-grid-item icon="/img/wdz.png" text="我的桩" />
              <van-grid-item icon="/img/grzbx.png" text="个人桩报修" />
            </van-grid>
          </div>
        </div>

        <!-- 我的社区 -->
        <div class="sq">
          <div class="sq1">
            <span class="sq-1" >我的社区</span>
          </div>
          <div class="sq2">
            <van-grid :column-num="4" :border="false">
              <van-grid-item icon="/img/dtpl.png" text="动态/评论" />
              <van-grid-item icon="/img/gzfs.png" text="关注/粉丝" />
              <van-grid-item icon="/img/sx.png" text="私信" />
              <van-grid-item icon="/img/fk.png" text="反馈" />
              <van-grid-item icon="/img/wd.png" text="问答" />
            </van-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    hobby() {
      this.$router.push("/preference");
    },
    charge() {
      this.$router.push("/charge");
    },
    pay() {
      this.$router.push("/zhifu");
    },
    message() {
      this.$router.push("/tidings");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.cd2[data-v-4e42760d],.wdz2[data-v-4e42760d],.sz2[data-v-4e42760d],.sq2[data-v-4e42760d]{
  font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
  font-weight: 400;
}
.f1 {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: rgb(176, 241, 222);
  width: 100vw;
  height: 200px;
  .container {
    margin: 0 auto;
    width: 90vw;
    .top {
      display: flex;
      justify-content: end;
      .top1 > img {
        margin-top: -15px;
        width: 30px;
        height: 30px;
        padding-left: 10px;
      }
    }
    .user {
      display: flex;
      margin-bottom: 40px;
      .user_img {
        margin-left: 10px;
        margin-right: 5px;
        img {
          width: 70px;
          height: 70px;
        }
      }
      .users {
        .u1 {
          font-family: "楷体";
          font-size: 23px;
          font-weight: 700;
          letter-spacing: 5px;
          margin-bottom: 10px;
          color: rgb(17, 14, 70);
          img {
            width: 60px;
            height: 20px;
          }
        }
        .u2 {
          .u2_jdt {
            width: 260px;
            margin-bottom: 13px;
          }
          p {
            width: 60px;
            margin-bottom: 10px;
            height: 20px;
            text-align: center;
            border-radius: 5px;
            line-height: 20px;
            font-size: 16px;
            border: 1px solid gold;
            font-family: "楷体";
            font-weight: 800;
            color: goldenrod;
          }
        }
        .u3 {
          color: goldenrod;
          font-size: 15px;
          font-family: "楷体";
          font-weight: 800;
        }
      }
    }
  }
}

.big {
  background-color: rgb(238, 236, 236);
}
.fu {
  width: 90%;
  // display: block;
  margin: 0 auto;
  position: relative;
  top: -50px;
}
.z1 {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  text-align: center;
  border-radius: 10px;
  color: black;
  margin-top: -40px;
}
.ac {
  width: 99%;
  height: 200px;
  border-radius: 10px;
  background-color: #ffffff;
  margin-top: 10px;
}
.ac1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  // word-wrap: break-word;
}
.ac1-1 {
  font-size: 22px;
  font-weight: 800;
  font-family: "楷体";
}
.ac1-2 {
  color: aqua;
  font-size: 16px;
  font-family: "楷体";
  font-weight: 800;
}
.ac2 {
  border: 1px solid gray;
  width: 90%;
  border-radius: 10px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  // justify-content: space-between;
  padding: 10px;
  // box-sizing: border-box;
}
.ac2-1 {
  height: 26px;
  width: 140px;
  color: gray;
  font-size: 16px;
  font-weight: 800;
  font-family: "楷体";
  line-height: 26px;
  // display: flex;
  margin: 0;
  padding: 0;
}
.ac2-2 {
  width: 70px;
  height: 24px;
  font-size: 16px;
  font-family: "楷体";
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  border-radius: 5px;
  color: goldenrod;
  border: 1px solid gold;
  margin: 0;
  padding: 0;
  border-radius: 24px;
}

.ac3 {
  height: 100px;
  line-height: 30px;
  margin-right: 15px;
  // display: flex;
}
.ac3-1 {
  width: 200px;
  // line-height: 30px;
  // display: flex;
}
.ac3-2 {
  display: flex;
  justify-content: space-between;
}
.xc {
  width: 50px;
  height: 50px;
}
.tyc {
  font-family: "楷体";
  font-weight: 800;
  font-size: 16px;
  display: flex;
  border-radius: 5px;
  color: palevioletred;
  border: 1px solid palevioletred;
  width: 50px;
  line-height: 24px;
  height: 24px;
}
.ac4 {
  width: 240px;
  //  margin-left: 5px;
}
.cd {
  width: 98%;
  margin-top: 10px;
  height: 230px;
  border-radius: 10px;
  background-color: white;
}
.cd1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.cd-1 {
  font-family: "楷体";
  font-size: 22px;
  font-weight: 800;
}
.cd-2 {
  font-family: "楷体";
  font-size: 18px;
  color: aqua;
  font-weight: 800;
}
.cd2 {
  font-weight: 800;
  font-family: "楷体";
}
.sz {
  width: 98%;
  height: 150px;
  background-color: white;
  border-radius: 10px;
  margin-top: 10px;
}
.sz1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.sz-1 {
  font-family: "楷体";
  font-size: 22px;
  font-weight: 800;
}
.sz-2 {
  font-family: "楷体";
  font-size: 16px;
  font-weight: 800;
  color: aqua;
}
.sz2 {
  font-size: 20px;
  font-family: "楷体";
  font-weight: 800;
}
.wdz {
  width: 98%;
  height: 150px;
  margin-top: 10px;
  border-radius: 10px;
  background-color: white;
}
.wdz1 {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.wdz-1 {
  font-size: 22px;
  font-family: "楷体";
  font-weight: 800;
}
.wdz-2 {
  font-size: 18px;
  font-family: "楷体";
  font-weight: 800;
  color: aqua;
}
.wdz2 {
  font-family: "楷体";
  font-weight: 800;
  font-size: 22px;
}
.sq {
  width: 98%;
  height: 240px;
  background-color: white;
  margin-top: 10px;
  border-radius: 10px;
}
.sq1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.sq-1 {
  font-family: "楷体";
  font-size: 22px;
  font-weight: 800;
}
.sq2 {
  font-family: "楷体";
  font-weight: 800;
  font-size: 22px;
}
</style>